<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("modelConfigPath", "purchase");
%>
<%@ include file="/WEB-INF/views/shared/master/contentHeader.jsp"%>
	
<t:panel cssClass="panel-flat form-detailed" customBody="true" customHead="true">
    <div class="detailed-navbar-content panel-body">
    	
        <t:form modelAttribute="purchase" action="/purchase/purchase/save" method="post" cssClass="form-horizontal">
            <div class="hide">
                <t:hidden path="purchaseId"/>
                <t:hidden path="deleteMark"/>
                
            </div>
            
            
            <div class="detailed-navbar-content panel-body">
	             <t:formgroup>
	                <t:label path="supplierId" cssClass="col-sm-1" />
	                <t:select2 allowClear="true" placeholder="请选择供应商" path="supplierId" colClass="col-sm-2" />
	                <t:label path="purchaseName" cssClass="col-sm-1" />
		            <t:input path="purchaseName" colClass="col-sm-2" /> 
	                <t:label path="purchaseDate" cssClass="col-sm-1" />
		            <t:date  path="purchaseDate" colClass="col-sm-2 col-xs-2"></t:date>
		          
	            </t:formgroup>
	            <t:formgroup>
	                <t:label path="purchaseNo" cssClass="col-sm-1" />
		            <t:input path="purchaseNo" colClass="col-sm-2" />
	                <t:label path="comment" cssClass="col-sm-1" />
	               	 <t:input path="comment" colClass="col-sm-2" />      
	            </t:formgroup>
	       
	  		</div>
        <div class="table-responsive" style="height:400px">   
				<table class="cntable table table-bordered dataTable " >
					<thead>
						<tr class="success" >
							<th style="width:100px">序号</th>
							<th style="width:50px"></th>
							<th style="width:120px">商品编码</th>
							<th style="width:180px">商品名称</th>
							<th style="width:120px">规格</th>
							<th style="width:60px">单位</th>
							<th style="width:80px">采购数</th>
							<th style="width:120px">采购单价(元)</th>
							<th style="width:120px">小计(元)</th>	
						</tr>
					</thead>
					<tbody onclick="checkSupplier()">
						<tr  >
							<td name="index"></td>
							<td style="margin: 0px;padding: 0px;">
				            	<div class="col-md-6 col-sm-6"  onclick="addSupplyCargo()" ><i class="fa fa-plus-square"></i></div>
				            	<div class="col-md-6 col-sm-6"  onclick="deleteSupplyCargo(this)"><i class="fa fa-minus-square"></i></div>
			            	</td>
							<td colspan="2" style="margin: 0px;padding: 0px;">
								<div class="col-xs-12">
								<select style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:210px;" data-for="supplyCargos"  onchange=changeView(this) id="collocationIds" name="collocationIds"  class="custom-select2 select2-hidden-accessible select_supplyCargo_" data-control-type="select2" data-select2-placeholder="请选择规格" data-select2-allowclear="true" data-val-required="必填" data-val="true" tabindex="-1" aria-hidden="true">
									<option value="" ></option>								
								</select>
								</div>
							</td>
							<td class="cargoNo" style="display:none"><label></label></td>
							<td class="cargoName" style="display:none"><label></label></td>
							
							<td class="property"><label></label></td>
							<td class="unit"><label></label></td>
							<td class="name_no"></td>
							<td class="name_no"></td>
							<td class="name_no"></td>
							<td  style="display:none;margin:0px" class="num_money purchaseNums">
								<input style="width:80px;" data-for="purchaseNums" value="0" onchange=sumMoney(this) name="purchaseNums" type="number" class="form-control purchaseNums " placeholder="数量">
							</td>
							<td style="display:none;margin:0px" class="num_money purchasePrices">
								<input style="margin:0px"  data-for="purchasePrices" onchange=sumMoney(this) name="purchasePrices" type="number" class="form-control purchasePrices " placeholder="价格">
							</td>
							<td style="display:none;margin:0px" class="num_money subtotal">
								<input  class="subtotal" value="0" readonly="true" type="number" style="background:none;outline:none;border:0px"  placeholder="0.0">
							</td>
						</tr>	
						<tr class="newtr" style="display:none">
							<td data-for="status" ></td>
							<td style="margin: 0px;padding: 0px;">
				            	<div class="col-md-6 col-sm-6"  onclick="addSupplyCargo()" ><i class="fa fa-plus-square"></i></div>
				            	<div class="col-md-6 col-sm-6"  data-for="delete"  onclick="deleteSupplyCargo(this)"><i class="fa fa-minus-square"></i></div>
			            	</td>
							
							<td class="cargoNo" style="display:none"><label></label></td>
							<td class="cargoName" style="display:none"><label></label></td>
							<td colspan="2" style="margin: 0px;padding: 0px;">
								<div class="col-xs-12">
								<select onchange=changeView(this) data-for="supplyCargos"   >
									<option value=""></option>									
								</select>
								</div>
							</td>
							
							<td class="property"><label></label></td>
							<td class="unit"><label></label></td>
							<td class="name_no"></td>
							<td class="name_no"></td>
							<td class="name_no"></td>
							<td  style="display:none" class="num_money purchaseNums">
								<input style="width:80px" data-for="purchaseNums" value="0" onchange=sumMoney(this)  type="number" class="form-control purchaseNums " placeholder="数量">
							</td>
							<td style="display:none" class="num_money purchasePrices">
								<input data-for="purchasePrices"  onchange="sumMoney(this)"  type="number" class="form-control purchasePrices " placeholder="价格">
							</td>
							<td style="display:none" class="num_money subtotal">
								<input class="subtotal" readonly="true" type="number" value="0" style="background:none;outline:none;border:0px"  placeholder="0.0">
							</td>
							
						</tr>	
						 <tr  id="addProduct" ></tr>
					</tbody>
					<tfoot >
						<tr  >
							<th style="width:100px">合计</th>
							<th></th>
							
							<th colspan="4"> </th>
					
							<th><input id="numSubtotal" readonly="true" type="number" style="background:none;outline:none;border:0px"  placeholder="0"></th>
							<th> </th>
							<th><input id="moneySubtotal" readonly="true" type="number" style="background:none;outline:none;border:0px"  placeholder="0.0"></th>
						</tr>
						<tr  >
							<th  colspan="7" rowspan="2"></th>
							<th >
								<label cssClass="col-sm-12">其他金额:</label>
							</th>
							<th><input id="otherMoney" name="otherMoney" onchange="checkSupplyCargo()" type="number" class="form-control" colClass="col-sm-8" placeholder="0.0"></th>
						</tr>
						<tr   >			
							<th >
								<label cssClass="col-sm-12">应付金额:</label>
							</th>
							<th style="color:red"><input id="purchaseMoney" style="color:red" readonly="true" type="number" class="form-control" colClass="col-sm-8" placeholder="0.0"></th>
						</tr>
					</tfoot>
				</table>     
				<p id="notice" style="color:red;display:none" >商品不能为空并要填写对应的数量和单价</p>     
			</div>
	  		
        </t:form>
    </div>
    <t:panelFoot headingBtnCssClass="heading-btn pull-right-important">
		<t:button icon="icon-floppy-disk" onclick="saveData()" laddaType="progress" cssClass="btn-info" csize="sm">保存</t:button>
	</t:panelFoot>
</t:panel>


<script type="text/javascript">
var productNum = 0;
var productInfoData = [];
var cargoInfo=[];
$(function() {
	randomNumber();
	$("#supplierId").change(function(){
		var supplierId=$(this).find("option:selected").val();
		$("#notice2").css("display","none");
		productInfoData=[];
		//$(".select_supplyCargo_ option").remove();
		 //var select=$(".select_supplyCargo_"+productNum).select2({placeholder:"请选择商品",allowClear: true ,data : productInfoData});
		cargoInfo=[];
		var url =$.getVirtualPath()+"/purchase/purchase/supplierSelect";
		 $.ajax({
		        type: 'get',
		        dataType: "json",
		        url: url,
		        data: "supplierId="+supplierId,
		        async: false,
		        success: function (result) {
		        	data=[];			
					if(!$.isNull(result)){
						data = result;
						cargoInfo=result;
			    		 result.forEach(function(element,index){		    			
			    				 puttyNum = 0;
			    				 if($.isNull(element.collocation.propertyNameTwo)){
			    					 productInfoData.push({
					    					id:element.collocation.collocationId,
					    					text:element.cargo.cargoNo+" "+element.cargo.cargoName+" "+"【"+element.collocation.propertyNameOne+"】"
					    				})
			    				 }else{
			    					 productInfoData.push({
					    					id:element.collocation.collocationId,
					    					text:element.cargo.cargoNo+" "+element.cargo.cargoName+" "+"【"+element.collocation.propertyNameOne+"*"+element.collocation.propertyNameTwo+"】"
					    				})
			    				 }
			    				
			    			}); 
			             }
		        }
		    });
		//var select=$("[data-for=supplyCargos]").filter(".select_supplyCargo_"+productNum).select2({placeholder:"请选择产品",allowClear: true ,data : productInfoData});

		 var select=$(".select_supplyCargo_").select2({placeholder:"请选择商品",allowClear: true ,data : productInfoData});
		 var select=$(".select_supplyCargo_"+productNum).select2({placeholder:"请选择商品",allowClear: true ,data : productInfoData});
	})
	
});


function randomNumber(){
	const now =new Date();	
	var  month=now.getMonth()+1;
	var day=now.getDate();
	var hour=now.getHours();
	var minutes=now.getMinutes();
	var seconds=now.getSeconds();
    var purchaseNo="CG-"+ now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds+"-" + (Math.round(Math.random() * 89 + 100)).toString()
	$("#purchaseNo").val(purchaseNo);
	
}

function addSupplyCargo(){
	var supplierId=$("#supplierId").find("option:selected").val();
	
	if($.isNull(supplierId)){
		return;
	}
	
	var divClass= "";	
	productNum++;
	divClass = "product_"+productNum;
	
	var productInfo = $('.newtr').clone();
	productInfo.css("display","")
	
	productInfo.removeClass("newtr").addClass(divClass);
	productInfo.find("[data-for=delete]").attr("data-delete",divClass);
	
	productInfo.find("[data-for=supplyCargos]").addClass("select_supplyCargo_"+productNum).attr("name","collocationIds");
	productInfo.find("[data-for=purchaseNums]").addClass("select_purchaseNum_"+productNum).attr("name","purchaseNums");
	productInfo.find("[data-for=purchasePrices]").addClass("select_purchasePrice_"+productNum).attr("name","purchasePrices");
	productInfo.find("[data-for=status]").addClass("select_status_"+productNum).attr("name","index");
	
	
	$("#addProduct").before(productInfo); 
	var select=$("[data-for=supplyCargos]").filter(".select_supplyCargo_"+productNum).select2({placeholder:"请选择产品",allowClear: true ,data : productInfoData});
	indexChange();
}

function checkSupplier(){
	var supplierId=$("#supplierId").find("option:selected").val();	
	if($.isNull(supplierId)){		
		$("#notice2").css("display","");
		$.notify("请选择供应商！","warning")
		return;
	}
}

function checkSupplyCargo(){
	var supplierId=$("#collocationIds").find("option:selected").val();
	var otherMoney=parseFloat($("#otherMoney").val());
	var moneySubtotal=parseFloat($("#moneySubtotal").val());
	
	$("#purchaseMoney").val(moneySubtotal+otherMoney)
	if($.isNull(supplierId)){
		
		$("#notice").css("display","")
	}
}

function sumMoney(element){
	if($(element).hasClass("purchaseNums")){
		var nums=$(element).val();
		var prices=$(element).parent().siblings(".purchasePrices").find("input").val();
		
		var subtotal=prices*nums;
		$(element).parent().siblings(".subtotal").find("input").val(subtotal);
		var sum=0;
		var allNum=0;
		$.each($("input.subtotal"),function(){
			 sum+=parseInt($(this).val());	
		});
		$.each($("input.purchaseNums"),function(){
			allNum+=parseInt($(this).val());	
		});
		$("#moneySubtotal").val(sum);
		$("#numSubtotal").val(allNum);
	}else
	if($(element).hasClass("purchasePrices")){
		var prices=$(element).val();
		var nums=$(element).parent().siblings(".purchaseNums").find("input").val();
		
		var subtotal=prices*nums;
		$(element).parent().siblings(".subtotal").find("input").val(subtotal);
		var sum=0;
		var allNum=0;
		$.each($("input.subtotal"),function(){
			 sum+=parseFloat($(this).val());	
		});
		$.each($("input.purchaseNums"),function(){
			allNum+=parseInt($(this).val());	
		});
		$("#moneySubtotal").val(sum);
		$("#numSubtotal").val(allNum);
	}
	var otherMoney=$("#otherMoney").val();
	$("#purchaseMoney").val(sum+otherMoney)
}


function indexChange(){
	var index=1;
	$("td[name='index']").each(function(){
		$(this).html(index);	
		index++;
	});
}


var mark=0;
function changeView(element){
	var cargoId=$(element).find("option:selected").val();
	
	$.each($("[data-for=supplyCargos]"),function(){
		
		if($(this).val()==cargoId){
			
			mark++;
			return false;

		}	
	});
	
	if(mark>1){
		$.notify("已存在相同产品","warning");
		mark=0;
	}

	if(!$.isNull(cargoId)){
			cargoInfo.forEach(function(date,index){		
			if(date.collocation.collocationId==cargoId){
				$(element).parent().parent().siblings(".cargoName").find("label").text(date.cargo.cargoName)
				$(element).parent().parent().siblings(".cargoNo").find("label").text(date.collocation.collocationNo)
				$(element).parent().parent().siblings(".unit").find("label").text(date.cargo.unit);
				if(typeof(date.collocation.propertyNameTwo)=='undefined'){
					$(element).parent().parent().siblings(".property").find("label").text(date.collocation.propertyNameOne);
				} else {
					$(element).parent().parent().siblings(".property").find("label").text(date.collocation.propertyNameOne+"/"+date.collocation.propertyNameTwo);

				}
			}
		})
		
		$(element).parent().parent().css("display","none");
		$(element).parent().parent().siblings(".name_no").css("display","none");
		$(element).parent().parent().siblings(".num_money").css("display","")
		$(element).parent().parent().siblings(".cargoName").css("display","")
		$(element).parent().parent().siblings(".cargoNo").css("display","")
	}
}

function deleteSupplyCargo(element){
	$("."+$(element).attr("data-delete")).remove();
	indexChange();
}

function saveData(lBtn){
	if (!$("form:first").valid()){
		return;
	}
	lBtn.start();
	$("form:first").submit();
}	


</script>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formtags.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formbuttons.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formpickers.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formselects.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formstyling.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/dialog.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/notifications.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/contentFooter.jsp"%>
